<template>
	<view class="my-team">
		<view class="top">
			<view class="user">
				<image class="user-avatar" :src="cityInfo.headimg" mode="aspectFit"></image>
				<view class="">
					<view class="user-name">{{cityInfo.title || cityInfo.name}}</view>
					<view class="user-grade">{{cityInfo.type_name}}</view>
				</view>
			</view>
			<view class="summary">
				<view class="">
					<view class="summ-item">
						团队成员
						<view class="summ-value">{{cityInfo.teamCount}}</view>
					</view>
					<view class="summ-item">
						直属队员
						<view class="summ-value">{{cityInfo.directlyUnder}}</view>
					</view>
				</view>
				<view class="add-button" v-if="!business_id" @click="navigateTo('./add-member')">
					<view class="add-icon"></view>添加成员
				</view>
			</view>
		</view>
		
		<view class="member-list">
			<!-- 成员列表 -->
			<view class="member" v-for="(item,key) in list" :key="key">
				<view class="member-info">
					<image class="member-avatar" :src="item.headimg" mode="aspectFit"></image>
					<view class="">
						<view class="flex-left">
							<view class="member-name">{{item.name}}</view>
							<view class="member-grade">{{item.type_name}}</view>
						</view>
						<view class="member-time">添加时间：{{item.create_time}}</view>
					</view>
				</view>
				<view class="member-stats">					
					<view class="stats-item">
						<view class="stats-item-data flex-left">
							<view class="stats-item-title">账户佣金</view>
							<view class="stats-item-value">{{item.account}}</view>
						</view>
						<view class="stats-link" @click="$util.redirectTo('/businesscenter/order-commission?business_id='+item.business_id)">
							TA的佣金
							<view class="stats-link-arrow"></view>
						</view>
					</view>					
					<view class="stats-item" v-if="item.type != 4">
						<view class="stats-item-data flex-left">
							<view class="stats-item-title">团队数量</view>
							<view class="stats-item-value">{{item.teamCount}}</view>
						</view>
						<view class="stats-link" @click="$util.redirectTo('/businesscenter/my-team?business_id='+item.business_id)">
							TA的团队
							<view class="stats-link-arrow"></view>
						</view>
					</view>
					<view class="stats-item">
						<view class="stats-item-data flex-left">
							<view class="stats-item-title">商家数量</view>
							<view class="stats-item-value">{{item.shopCount}}</view>
						</view>
						<view class="stats-link" @click="$util.redirectTo('/businesscenter/store-manage?business_id='+item.business_id)">
							TA的商家
							<view class="stats-link-arrow"></view>
						</view>
					</view>
					<!-- <view class="stats-item">
						<view class="stats-item-data flex-left">
							<view class="stats-item-title">店主人数</view>
							<view class="stats-item-value">{{item.fenxiaoCount}}</view>
						</view>
						<view class="stats-link" @click="$util.redirectTo('/businesscenter/fenxiao-manage?business_id='+item.business_id)">
							TA的店主
							<view class="stats-link-arrow"></view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<ns-empty v-if="!list.length" text="暂无团队信息" :fixed="!1" :isIndex="!1"></ns-empty>
		
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				page_size: 10,
				page_count: 1,
				cityInfo:{},
				list: [],
				business_id: ''
			}
		},
		onLoad(e) {
			this.business_id = e.business_id || '';
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.list = [];
				this.getMyTeam();
				this.getList();
			} else {
				this.$util.redirectTo(
					'/otherpages/login/login/login',
					{
						back: '/businesscenter/my-team'
					},
					'redirectTo'
				);
			}
		},
		methods: {
			getMyTeam() {
				this.$api.sendRequest({
					url: '/city/api/index/getMyTeam',
					data: {
						business_id: this.business_id
					},
					success: res => {
						this.cityInfo = res.data;
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			getList() {
				this.$api.sendRequest({
					url: '/city/api/index/directlyUnder',
					data: {
						page: this.page,
						page_size: this.page_size,
						business_id: this.business_id
					},
					success: res => {
						let newArr = [];
						newArr = res.data.list;
						this.list = this.list.concat(newArr);
						this.page_count = res.data.page_count;
					}
				});
			},
			nextPage() {
				if (this.page < this.page_count) {
					this.page++;
					this.getList();
				}
			},
			navigateTo(url){
				uni.navigateTo({
					url
				})
			}
		},
		onReachBottom() {
			this.nextPage();
		}
	}
</script>

<style lang="scss" scoped>
	@import '../common/css/mixins.scss';

	.flex-left {
		@include flex(flex-start);
	}

	.my-team {
		padding: 48rpx 30rpx;
		background-image: linear-gradient(0deg, #FF4544 0%, #FF4544 100%);
		background-size: 100% 540rpx;
		background-repeat: no-repeat;
	}

	.top {
		.user {
			@include flex(flex-start);
			margin-top: 18rpx;

			.user-avatar {
				margin-right: 20rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 120rpx;
				border: 2rpx solid #fff;
				background-color: #f8f8f8;
			}

			.user-name {
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 45rpx;
			}

			.user-grade {
				margin-top: 12rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 33rpx;
			}
		}

		.summary {
			@include flex(space-between);
			margin-top: 40rpx;
			padding: 30rpx;
			width: 690rpx;
			background: rgba(255, 137, 136, 0.5);
			border-radius: 4rpx;

			.summ-item,
			.summ-value,
			.add-button {
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 46rpx;
			}

			.summ-item {
				@include flex(flex-start);
				margin-top: 12rpx;

				&:first-child {
					margin-top: 0;
				}

				.summ-value {
					margin-left: 8rpx;
				}
			}

			.add-button {
				@include flex(flex-end);
				font-size: 28rpx;

				.add-icon {
					margin-right: 8rpx;
					width: 32rpx;
					height: 32rpx;
					@include image('add-white-circle.png');
				}
			}
		}
	}

	.member-list {
		margin-top: 40rpx;
	}

	.member {
		margin-bottom: 24rpx;
		background-color: #fff;

		.member-info {
			@include flex(flex-start);
			padding: 30rpx 30rpx 20rpx 30rpx;
			border-bottom: 1rpx solid #E8E8E8;

			.member-avatar {
				flex-shrink: 0;
				margin-right: 16rpx;
				width: 68rpx;
				height: 68rpx;
				border-radius: 68rpx;
				background-color: #f8f8f8;
			}

			.member-name {
				margin-right: 12rpx;
				font-size: 32rpx;
				color: #303133;
				line-height: 40rpx;
			}

			.member-grade,
			.member-time {
				font-size: 24rpx;
				color: #909399;
				line-height: 33rpx;
			}

			.member-time {
				margin-top: 8rpx;
			}
		}

		.member-stats {
			padding: 30rpx;

			.stats-item {
				@include flex(space-between);
				margin-bottom: 30rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.stats-item-data {

					.stats-item-title,
					.stats-item-value {
						font-size: 28rpx;
						color: #303133;
						line-height: 34rpx;
					}

					.stats-item-value {
						margin-left: 8rpx;
					}
				}

				.stats-link {
					@include flex;
					font-size: 24rpx;
					color: #909399;
					line-height: 34rpx;

					.stats-link-arrow {
						@include image('icon-link-arrow.png');
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

		}
	}
</style>
